<template>
  <view class="hor-layout" style="padding-left: 5px">
    <view v-for="(tItem,index) in types" :key="index" class="type-btn"
          @click="selectTypeItem(tItem)" :class="{'selected':tItem.selected}">
      {{ tItem.name }}
    </view>
  </view>
</template>

<script>
export default {
  name: "check-group",
  props: {
    types: {
      type: Array,
      default: () => {
        return [
          {name: 'USD'},
          {name: 'CAD'},
          {name: 'UK'},
          {name: 'AUD'},
          {name: 'EUR'},
        ]
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    selectTypeItem(tItem) {
      this.types = this.types.map(item => {
        item.selected = item.name == tItem.name
        return item
      })
    }
  }
}
</script>

<style scoped>
.type-btn {
  margin: 10px 0px;
  margin-right: 7px;
  padding: 3px 5px;
  color: #999999;
  font-size: small;
  background: #f7f7f7;
  border-radius: 3px;
  box-shadow: 0 0 2px #999999;
}

.type-btn.selected {
  color: #55bbb3;
  background: rgba(85, 187, 179, 0.2);
  box-shadow: 0 0 2px #55bbb3;
}
</style>
